import React, { useEffect, useState } from 'react'
import { ResultPage, Card, Switch, Button, Swiper,Image } from 'antd-mobile'
import styles from './home.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import axios from 'axios'

function Index() {

  //走马灯图片渲染
  const banner = [
    'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60',
    'https://gw.alipayobjects.com/zos/bmw-prod/b874caa9-4458-412a-9ac6-a61486180a62.svg'
  ]

  //快讯数据
  let [data,setData]=useState([])
  const getData=async()=>{
    const res=await axios.get('/api//news/simple')
    console.log('res',res.data)
    setData(res.data.data)
  }
  useEffect(()=>{
    getData()
  },[])

  return (
    <div>
      <ResultPage
        status=''
        title='火车票预订'
        description='便携购票，服务您的每一次出行'
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <div className={styles.che}>
            <span>北京</span>
            <LoopOutline />
            <span>上海</span>
          </div>
          <div className={styles.rq}>
            <span>2024-12-10</span>
            <span>周二(今天)</span>
          </div>
          <div className={styles.rq}>
            <span style={{ color: '#ccc', marginRight: '220px' }}>只看高铁</span><Switch />
          </div>
          <div>
            <Button block color='warning' shape='default'>
              搜索
            </Button>
          </div>
        </ResultPage.Card>

        <Card style={{ marginTop: 12 }}>
          <Swiper autoplay>{
            banner.map((item, index) => (
              <Swiper.Item key={index}>
                <Image src={item}></Image>
              </Swiper.Item>
            ))}</Swiper>
        </Card>
        <Card style={{ marginTop: 12 }}>
          {
            data.map((item,index)=>{
              return <div style={{display:"flex",height:'80px'}} key={index}>
                <span  style={{display:"flex",flexWrap:'wrap',marginRight:'10px',width:'10px'}}>{item.id}</span>
                <span style={{display:"flex",flexWrap:'wrap',marginRight:'10px',width:'270px'}}>{item.title}</span>
                <img src={item.image} style={{width:'20px',height:'20px'}} />
              </div>
            })
          }
        </Card>
      </ResultPage>
    </div>
  )
}

export default Index
